<template>
  <!-- 内置图标 -->
  <el-dialog :visible.sync="showIcon" width="605px" @close="close">
    <common-title>内置图标</common-title>
    <div class="icon_wrap">
      <span v-for="i in 64" :key="i" @click="clickFn(`/static/icons/100个图标2-${i+3}.png`)">
        <img :src="`/static/icons/100个图标2-${i+3}.png`" alt="">
      </span>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ['show'],
  watch: {
    show (val) {
      this.showIcon = val
    }
  },
  data () {
    return {
      showIcon: false
    }
  },
  methods: {
    close () {
      this.$emit('update:show', false)
    },
    clickFn (src) {
      this.$emit('changeIcon', src)
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../../../assets/variate.less";

// 内置图标弹窗
.icon_wrap {
  width: 100%;
  max-height: 450px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
  > span {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    margin-right: 62px;
    line-height: 50px;
    img {
      width: 100%;
      height: 100%;
    }
    &:nth-of-type(5n) {
      margin-right: 0;
    }
    &:nth-of-type(n + 6) {
      margin-top: 40px;
    }
    &:hover {
      transition: 0.3s;
      transform: scale(1.1);
    }
  }
}
</style>
